
<template>
  <page-card title="角色分类">
    <div class="table-page-search-wrapper">
      <slot name="searchWrapper" />
      <a-row v-if="!$slots.searchWrapper"
             type="flex"
             style="margin-bottom:20px"
             justify="end">
        <a-col v-if="hasPermission('add')"
               flex="1">
          <a-space>
            <slot name="buttons" />
            <template v-if="!$slots.buttons && hasPermission('add')">
              <a-button type="primary"
                        icon="plus"
                        @click="handleEdit()">
                新增
              </a-button>
            </template>
          </a-space>
        </a-col>
        <template>
          <a-col>
            <slot name="search" />
            <a-input-search v-if="!$slots.search"
                            v-model="queryParam.roleClassName"
                            placeholder="分类名称"
                            allow-clear
                            @search="search" />
          </a-col>
        </template>
      </a-row>
    </div>
    <slot name="table" />
    <a-table v-if="!$slots.table"
             :columns="columns"
             :rowKey="(record, index) => index"
             :data-source="data"
             @change="handleTableChange"
             :pagination="pagination">
      <span slot="status"
            :style="{color:statusCell[record.status].color}"
            slot-scope="text, record">{{ statusCell[record.status].text }}</span>

      <span slot="action"
            slot-scope="text, record">
        <template v-for="(action, index) in actions">
          <span :key="index">
            <a-divider type="vertical"
                       v-if="index>0" />
            <a v-if="action.code!='delete'"
               @click="action.fn(record.id,record)">
              {{ action.text }}
            </a>
            <a-popconfirm v-else
                          title="确认删除？"
                          ok-text="是"
                          cancel-text="否"
                          @confirm="action.fn(record.id)">
              <a href="javascript:;">
                {{ action.text }}
              </a>
            </a-popconfirm>
          </span>
        </template>
      </span>
    </a-table>

    <!-- 新增/编辑 -->
    <a-modal v-model="modalRoleClassVisible"
             :title="modalRoleClassTitle"
             destroyOnClose
             width="40%"
             style="z-index:10003;height:550px"
             ok-text="确定"
             cancel-text="取消"
             :footer="null">
      <div class="border">
        <a-row type="flex"
               justify="center">
          <a-col :span="24">
            <a-form-model ref="form"
                          :model="form"
                          :rules="formRules"
                          :label-col="{ span: 6 }"
                          :wrapper-col="{ span: 12 }">
              <a-form-model-item prop="id" label="数据编号" v-show="false">
                <a-input v-model="form.id"></a-input>
              </a-form-model-item>
              <a-form-model-item required label="分类名称"
                                 prop="roleClassName">
                <a-input placeholder="分类名称长度不超过30位"
                         :maxLength="30"
                         v-model.trim="form.roleClassName"
                         allow-clear />
              </a-form-model-item>
              <a-form-model-item required label="排序号"
                                 prop="orderNo">
                <a-input-number placeholder="请输入"
                                :min="1"
                                :max="9999"
                                v-model="form.orderNo"
                                allow-clear />
              </a-form-model-item>
              <a-form-model-item label="状态"
                                 prop="status">
                <z-switch-one-zero checked-children="启用"
                                   un-checked-children="停用"
                                   v-model="form.status" />
              </a-form-model-item>

              <a-form-model-item label=" "
                                 :colon="false">
                <div style="text-align:center">
                  <a-space size="small">
                    <a-button type="primary"
                              @click="cancel"
                              style="width: 80px;">取消</a-button>
                    <a-button type="primary"
                              @click="save"
                              style="width: 80px;">保存</a-button>
                  </a-space>
                </div>
              </a-form-model-item>

            </a-form-model>
          </a-col>
        </a-row>
      </div>
    </a-modal>

  </page-card>
</template>

<script>
import { getRoleClassPageList, roleClassAddAndModify, getClassByIdDel, getMaxNo } from '../../api/role/index'
import { PAGINATION, TABLE_STATUS_CELL } from '../../constants'
// import cloneDeep from 'loda'
const deepClone = require('clone')
export default {
  props: {
    onLoad: {
      type: Function,
      default: null
    },
    onDelete: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      data: [],
      modalRoleClassVisible: false,
      modalRoleClassTitle: '新增',
      pagination: PAGINATION,
      statusCell: TABLE_STATUS_CELL,
      queryParam: {},
      actions: [],
      form: {
        roleClassName: '',
        orderNo: 1,
        status: '1'
      },
      formRules: {
        roleClassName: [
          { required: true, message: '请输入分类名称' },
          { max: 30, message: '分类名称长度不超过30位' }
        ],
        orderNo: [
          { required: true, message: '请输入排序号' },
          { pattern: /^[1-9]\d*$/, message: '排序号应该为正整数' }
        ]
      },
      columns: [
        {
          title: '分类名称',
          width: 200,
          dataIndex: 'roleClassName'
        },
        {
          title: '排序号',
          align: 'center',
          width: 120,
          dataIndex: 'orderNo'
        },
        {
          title: '创建时间',
          align: 'center',
          width: 150,
          dataIndex: 'createTime',
          customRender: (v) => v.split(' ')[0]
        },
        {
          title: '状态',
          width: 100,
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ]
    }
  },
  created () {
    let width = 180,
      me = this
    if (this.hasPermission('edit') && (width += 28)) {
      this.actions.push({
        text: '编辑',
        code: 'edit',
        fn: this.handleEdit
      })
    }
    if (this.hasPermission('delete') && (width += 28)) {
      this.actions.push({
        text: '删除',
        code: 'delete',
        fn: this.handleDelete
      })
    }

    if (this.actions.length > 0) {
      this.columns.push({
        title: '操作',
        width: width,
        align: 'center',
        scopedSlots: { customRender: 'action' }
      })
    }
    // 未重写table，调用默认加载列表数据接口
    !this.$route.meta.keepAlive && !this.$slots.table && this.load()
  },
  activated () {
    // 未重写table，调用默认加载列表数据接口
    !this.$slots.table && this.load()
  },
  methods: {
    search () {
      this.pagination.current = 1
      this.load()
    },
    load () {
      this.queryParam.currPage = this.pagination.current
      this.queryParam.pageSize = this.pagination.pageSize
      getRoleClassPageList({ ...this.queryParam }).then((response) => {
        this.data = response.list
        this.pagination.current = response.currPage
        this.pagination.total = response.totalCount
        this.pagination.pageSize = response.pageSize
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.load()
    },
    async handleEdit (id, record) {
      if (id) {
        this.modalRoleClassTitle = '编辑'
        this.form = record
      } else {
        this.modalRoleClassTitle = '新增'
        const response = await getMaxNo()
        this.form.id = null
        this.$set(this.form, 'roleClassName', '')
        this.$set(this.form, 'orderNo', response == 0 ? 1 : response)
        this.$set(this.form, 'status', '1')
      }
      this.modalRoleClassVisible = true
    },
    handleDelete (id) {
      getClassByIdDel({ id: id }).then((res) => {
        this.load()
      })
    },
    cancel() {
      this.modalRoleClassVisible = false
      this.form = {}
      this.load()
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          roleClassAddAndModify(this.form).then((res) => {
            this.modalRoleClassVisible = false
            this.load()
          })
        }
      })
    }
  }
}
</script>

<style>
</style>
